<template>
    <div class="guestBookTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">客户留言中心</span></el-divider>
        </div>

        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([guestBooks[1],guestBooks[2]])">批量删除</el-button>
        </div>
        <div class="addGuestBook">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline" @click="addGuestBook">发送留言
            </el-button>
        </div>
        <div class="selectType">
            <el-select v-model="reply" clearable placeholder="请选择">
                <el-option
                        v-for="item in REPLY_STATUS"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                >
                </el-option>
            </el-select>

            <el-button class="selectBtn" type="primary" @click="pageReplyList(1,reply)">留言状态
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(guestBook,index) of guestBooks" :key="index"
        如果需要显示子节点，需要加入lazy（不设置children的情况下）
        这里基于reply回复状态返回dtoList，取消:load="getReplyChildren"二次加载数据请求，一旦开启，如果为树状，数据不准确
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="guestBooks"
                :tree-props="{children:'children',hasChildren:'hasChildren'}"
                row-key="uniId"
                lazy
                height="600"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <!--<el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="ID"
                    width="60"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">{{scope.row.uniId}}</template>
            </el-table-column>-->

            <el-table-column
                    sortable
                    fixed
                    prop="memberId"
                    label="会员昵称"
                    width="200"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="'primary'"
                            size="mini" disable-transitions>{{scope.row.memberId}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="employeeId"
                    label="员工姓名"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="content"
                    label="留言内容"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    sortable
                    prop="replyContent"
                    label="回复内容"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    sortable
                    prop="reply"
                    label="状态"
                    width="70"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.reply === 1 ? 'success' : 'danger'"
                            size="mini" disable-transitions>{{REPLY_STATUS | optionObjectKV(scope.row.reply)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="createTime"
                    label="创建时间"
                    width="160"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="updateTime"
                    label="更新时间"
                    width="160"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="250">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="newReply(scope.row)">回复
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>


        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>

        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";

    export default {
        name: "GuestBookSet",
        //引用组件
        components: {PageHelper},
        data() {
            return {
                message: '这里是大模块-留言管理表内容页',
                guestBooks: [], //页面回显数据
                gbook: [], //中转id→name/nickName
                guestBook: {}, //编辑/save/del的留言对象
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                REPLY_STATUS: REPLY_STATUS,
                //员工搜索
                empList: [],
                emp: '',
                employees: [],
                members: [],
                reply: null,
            }
        },
        mounted() {

            this.employees=SessionStorage.get(EMP_ALL);
            this.members=SessionStorage.get(MEMBER_ALL);
            //2.分页列表查询，默认初始化执行第一页
            //this.pageList(1);
            this.pageTreeList(1);

        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/guestBook/dtoList')
                    .then((response) => {
                        console.log("模块-留言管理表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/guestBook/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.guestBooks = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                    //获取全部员工
                    this.allEmployees();
                    this.allMembers();
                })
            },

            //3.新增guestBook
            addGuestBook() {
                //可以在这里清空guestBook:this.guestBooks=null;
                this.$router.push("/source/guestBook/add");
            },
            //4.修改
            edit(guestBook) {
                /*jquery继承对象： $.extend({新对象},旧对象)
                避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
                 */
                for (let i = 0; i < this.employees.length; i++) {
                    if(guestBook.employeeId === this.employees[i].name){
                        guestBook.employeeId = this.employees[i].uniId;
                    }
                }
                for (let i = 0; i < this.members.length; i++) {
                    if(guestBook.memberId === this.members[i].nickName){
                        guestBook.memberId = this.members[i].uniId;
                    }
                }
                this.guestBook = $.extend({}, guestBook);
                this.$router.push({
                    name: "source/guestBook/add",
                    params: {guestBook}
                });
            },
            del(guestBook) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的guestBook转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let guestBookParam = guestBook;
                toast.showConfirm(guestBook.content, function () {
                    if(guestBookParam.parentId==="0"){
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/guestBook/delBatch/' + guestBookParam.uniId)
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    this.pageTreeList(1);
                                }
                            })

                    }else{
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/guestBook/del/' + guestBookParam.uniId)
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    this.pageTreeList(1);
                                }
                            })

                    }

                    }
                )
            },
            //更新显示show
            updateShow(row) {
                this.guestBook = row;
                let responseMsg = '';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/guestBook/save', this.guestBook)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },

            pageReplyList(page, reply) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/guestBook/replyPage', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    typeId: reply
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.gbook = resp.responseData.listPageData;
                    for (let i = 0; i < this.employees.length; i++) {
                        for (let j = 0; j < this.gbook.length; j++) {
                            if (this.gbook[j].employeeId === this.employees[i].uniId) {
                                this.gbook[j].employeeId = this.employees[i].name;
                            }
                        }
                    }
                    for (let i = 0; i < this.members.length; i++) {
                        for (let j = 0; j < this.gbook.length; j++) {
                            if (this.gbook[j].memberId === this.members[i].uniId) {
                                this.gbook[j].memberId = this.members[i].nickName;
                            }
                        }
                    }

                    this.guestBooks = this.gbook;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            /*getReplyChildren(tree, treeNode, resolve) {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/guestBook/childList/' + tree.uniId).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    let childrenData=resp.responseData;
                    for (let i = 0; i < this.employees.length; i++) {
                        for (let j = 0; j < this.guestBooks.length; j++) {
                            if (this.guestBooks[j].employeeId === this.employees[i].uniId) {
                                this.guestBooks[j].employeeId = this.employees[i].name;
                            }
                        }
                    }
                    for (let i = 0; i < this.members.length; i++) {
                        for (let j = 0; j < this.guestBooks.length; j++) {
                            if (this.guestBooks[j].memberId === this.members[i].uniId) {
                                this.guestBooks[j].memberId = this.members[i].nickName;
                            }
                        }
                    }
                    console.log("响应的子节点分页数据: ", resp);
                    resolve(childrenData);

                })
            },*/
            //新增回复
            newReply(guestBook) {
                let parentId = guestBook.uniId;
                let memberId = guestBook.memberId;
                let employeeId = guestBook.employeeId;
                this.$router.push({
                    name: "source/guestBook/add",
                    params: {parentId, memberId, employeeId}
                })
            },
            //新tree结构分页
            pageTreeList(page, reply) {
                Loadings.show();
                //获取全部员工

                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/guestBook/pageTreeList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size = 100, //这里源于父子结构table，需更新size，取消默认size
                    typeId: reply
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.gbook = resp.responseData.listPageData;
                    for (let i = 0; i < this.employees.length; i++) {
                        for (let j = 0; j < this.gbook.length; j++) {
                            if (this.gbook[j].employeeId === this.employees[i].uniId) {
                                this.gbook[j].employeeId = this.employees[i].name;
                            }
                        }
                    }
                    for (let i = 0; i < this.members.length; i++) {
                        for (let j = 0; j < this.gbook.length; j++) {
                            if (this.gbook[j].memberId === this.members[i].uniId) {
                                this.gbook[j].memberId = this.members[i].nickName;
                            }
                        }
                    }

                    this.guestBooks = this.gbook;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addGuestBook {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }

    /*留言状态选择*/
    .selectType {
        float: left;
        margin-left: 30px;
        margin-top: 1px;
    }

    .selectBtn {
        margin-left: 10px;
    }
    /*修改固定高度后的bg*/
    .previous-row{
        background: #ffffff;
    }
</style>